<template>
  <div>
    <div class="title">精品歌单</div> 
    <div class="playlist">
      <div class="playlist-item" v-for="(item,i) in data">
        <div style="position: relative;cursor: pointer;" @click="turnDetail(item.id)">
          <div class="iconfont icon-huangguan"></div>
          <img :src="item.coverImgUrl">
          <span class="playcount">▷ {{item.playCount | simpNum}}</span>
          <span class="icon" @click.stop="getId(item.id)">
            <i class="iconfont icon-you" 
              @click="getId(item.id)" 
              style="color:rgb(236,65,65);font-size:15px;position: relative;left: 2px;">
            </i>
          </span>
        </div>
        <div>
          <div class="name">{{item.name}}</div>
          <div class="nickname" @click="GoProfile(item.creator.userId)">by {{item.creator.nickname}}</div>
          <div class="copywriter">{{item.copywriter}}</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import {simpNum} from 'common/filter'
import {request} from 'network/request'
export default {
  name:'BestPlayList',
  data(){
    return{
      cat:'',
      data:[],
    }
  },
  methods:{
    async getHighQuality(){
      const data = await request("GET",'top/playlist/highquality',{cat:this.cat})
      this.data = data.playlists
    },
    async getId(id){
      const data = await request("GET",'/playlist/detail',{id:id})
      this.$store.commit('addPlayList',data.playlist.tracks)
      localStorage.setItem('currentPlayListId',id)
    },
    turnDetail(id){
      this.$router.push('/playlistdetail/'+id+'/'+0)
    },
    GoProfile(id){
      this.$router.push('/profile/'+id)
    }
  },
  created(){
    let cat = this.$route.params.id
    if(cat.indexOf(":")){
      this.cat = cat.replace(':',"/")
    }else{
      this.cat = cat
    }
    this.getHighQuality()
  },
  filters:{
    simpNum
  },
}
</script>

<style scoped>
  .title{
    font-weight: 800;
    font-size: 20px;
    color: rgb(55,55,55);
    margin-top: 10px;
  }
  .playlist{
    margin:10px 0 30px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .playlist-item{
    min-width: 33.3%;
    max-width: 33.3%;
    margin-bottom: 20px;
    display: flex;
    position:relative;
    overflow: hidden;
  }
  .playlist-item img{
    width: 130px;
    height: 130px;
    border-radius: 5px;
    cursor: pointer;
  }
  .icon-huangguan{
    width: 42px;
    height: 20px;
    font-size: 12px;
    background-color: rgb(243,176,104);
    text-align: center;
    position: absolute;
    top: -2px;
    left: -13px;
    transform: rotateZ(-45deg);
    color: #fff;
  }
  .playlist-item div{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .name{
    color: rgb(55,55,55);
    font-size: 15px;
    padding-left: 10px;
    cursor: pointer;
  }
  .nickname{
    color:rgb(159,159,159);
    font-size: 12px;
    padding-left: 8px;
    cursor: pointer;
  }
  .nickname:hover{
    color:rgb(103,103,103)
  }
  .copywriter{
    color: rgb(207,207,207);
    font-size: 12px;
    padding-left: 8px;
    font-weight:100;
  }
  .playlist-item .playcount{
    position:absolute;
    top:0;
    right: 0;
    color: #fff;
    z-index: 9;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding-right: 7px;
  }
  .playlist-item .icon{
    opacity: 0;
    position:absolute;
    bottom:10px;
    right: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(245,245,244);
    transition: all 1s ease-out;
    border-radius: 50%;
  }
  .playlist-item:hover .icon{
    opacity: 1;
  }
</style>